<script setup lang="ts">
import { ref } from "vue";
import type { galdata } from '../../../model/galData'
import { ElScrollbar } from "element-plus";

import dataRow from "./dataRow/index.vue";
import inputText from "../../../components/input-text.vue";
import DataManager from "../../../manager/dataManager";
import ColorManager from "../../../manager/colorManager";

let galData: Array<galdata> = [];
const galList = ref<Array<galdata>>();
const colorArr = ColorManager.get(0);

const textColor = colorArr.text;


DataManager.get('galData').then(res => {
    galData = JSON.parse(JSON.stringify(res));
    galList.value = res;
});


galList.value = JSON.parse(JSON.stringify(galData));

let timeOut: number;
const inputText_InputEvent = (val: string) => {
    clearInterval(timeOut);
    timeOut = setTimeout(() => {
        selectGalList(val);
    }, 500);
}

const selectGalList = (val: string) => {
    if (val.replace(' ', '') == '') {
        galList.value = galData;
    } else {
        const arr = val.toLocaleLowerCase().split(' ').filter(o => o);
        galList.value = galData.filter(u => arr.findIndex(o => u.Name.toLocaleLowerCase().indexOf(o) != -1 || u.NickName.toLocaleLowerCase().indexOf(o) != -1) != -1);
    }
}




</script>

<template>
    <div class="galgame-root">
        <div class="galgame-top">
            <input-text @inputTextValue="inputText_InputEvent" class="inputText"></input-text>
            <div class="prompt">
                <span>检索的时候请不要全名检索, 因为一些逻辑并没有进行处理</span>
                <br />
                <span>假如检索[Clover Day's], 请直接检索[Clover]或者[Day]</span>
                <br />
                <span>如果能力允许的话可以直接在<a href="../../../../public/galData/galData.json" target="_blank">这里</a>进行检索</span>
            </div>
        </div>
        <el-scrollbar height="100%">
            <div class="scrollbar-topShadow"></div>
            <div class="list-box">
                <dataRow class="dataRow-com" v-for="(data, index) in galList" :galRowData="data" :key="index"></dataRow>
            </div>
            <div class="scrollbar-botShadow"></div>
        </el-scrollbar>

    </div>
</template>

<style scoped>
.galgame-root {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
}

.prompt {
    float: right;
    color: v-bind(textColor);
    font-size: 12px;
    padding-right: 20px;
}

.dataRow-com {
    margin-top: 10px;
}

.el-scrollbar {
    position: relative;
}

.list-box {
    padding-top: 10px;
    padding-bottom: 30px;
}

.scrollbar-topShadow {
    position: absolute;
    top: 0;
    width: 100%;
    height: 30px;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
}

.scrollbar-botShadow {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    z-index: 999;
    border-radius: 0px 0px 7px 7px;
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
}

.galgame-top {
    padding: 10px;
    padding-bottom: 0px;
}
</style>